<template>
	<view class="me">
		<image src="https://hxs.dsjhs.com:553/prod-api/profile/me-bg.png" mode="widthFix" class="width100 bg_img"></image>
		<view class="pore">
			<view>
				<u-navbar title="我的" bgColor="transparent" :fixed="false" leftIconSize="0">
				</u-navbar>
			</view>
			<u-gap height="10"></u-gap>
			<view class="m30">
				<view class="flex-jus flex-start" v-if="hasLogin">
					<view class="">
						<image class="avatar"
							:src="userInfo.userAvatar?(api_host + userInfo.userAvatar) : '../../static/images/index/icon1.png'"
							mode=""></image>
					</view>
					<view class="flex1">
						<view class="ml20">
							<view class="flex-jus">
								<view class="f32 c343 bold">{{userInfo.userName}}</view>
								<image src="../../static/images/me/set.png" mode="" style="width: 56rpx;height: 56rpx;"
									@click="openUrl('/subpage/me/userinfo')">
								</image>
							</view>
							<view class="flex mt10">
								<view class="mr30">
									<view class="f36 c343 bold">{{userInfo.vlogVolume}}</view>
									<u-gap height="1"></u-gap>
									<view class="f-scale c0b0 data-name">作品</view>
								</view>
								<view class="mr30">
									<view class="f36 c343 bold">{{userInfo.likeVolume}}</view>
									<u-gap height="1"></u-gap>
									<view class="f-scale c0b0 data-name">获赞</view>
								</view>
								<view>
									<view class="f36 c343 bold">{{userInfo.collectionVolume}}</view>
									<u-gap height="1"></u-gap>
									<view class="f-scale c0b0 data-name">收藏</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="flex" v-else @click="nologinJump('/pages/me/mobile_login')">
					<view class="">
						<image class="avatar" :src="api_host + config.avatar" mode=""></image>
					</view>
					<view class="flex1">
						<view class="ml20">
							<view class="f32 c343 bold">登录</view>
						</view>
					</view>
				</view>
				<u-gap height="30"></u-gap>
				<view class="bgFff radius30 p30">
					<view class="flex-jus">
						<!-- <view class="f28 c343 bold">我的工具</view> -->
						<!-- <view class="bgF7 p10 radius30" @click="showMenu = !showMenu">
								<u-icon :name="showMenu?'arrow-up':'arrow-down'" size="12" color="#0B0F12"
									:label="showMenu?'收起':'展开'" labelColor="#0B0F12" labelPos="left" labelSize="12"></u-icon>
							</view> -->
					</view>
					<!-- <u-gap height="10"></u-gap> -->
					<view class="flex flex-start textC flex-wrap">
						<view class="menu-item" :class="index < 4?'mb30':''"
							v-for="(item,index) in menuList.slice(0,showMenu?menuList.length:4)" :key="index"
							@click="openUrl(item.path)">
							<view>
								<image :src="'../../static/images/me/' + item.icon + '.png'" mode=""
									style="width: 60rpx;height: 60rpx;"></image>
							</view>
							<view class="f24 c0b0">{{item.name}}</view>
						</view>
					</view>
				</view>
				<u-gap height="30"></u-gap>
				<view class="flex-au">
					<view v-for="(item,index) in navList" :key="index" class="c999 f32"
						:class="{'active pore':navIndex == index}" @click="navClick(index)">
						{{item.name}}
					</view>
				</view>
				<view class="flex mt20" v-if="navIndex == 1">
					<u-tabs :list="nav2List" :current="navIndex2" keyName="name" @click="nav2Click" lineColor="#FFDE6D"
						lineHeight="8" lineWidth="25" :activeStyle="{
			    color: '#34314F',
			    fontWeight: 'bold'
			}"></u-tabs>
				</view>
				<!-- <view class="flex mt20" v-if="navIndex == 2">
						<u-tabs :list="nav3List" :current="navIndex3" keyName="name" @click="nav3Click" lineColor="#FFDE6D"
							lineHeight="8" lineWidth="25" :activeStyle="{
				    color: '#34314F',
				    fontWeight: 'bold'
				}"></u-tabs>
					</view> -->
				<u-gap height="20"></u-gap>
				<view v-if="navIndex == 0">
					<waterfall-flow v-if="worksData.length > 0" :dataArray="worksData" draft></waterfall-flow>
				</view>
				<view v-if="navIndex == 1">
					<view v-if="navIndex2 == 0">
						<goods-list v-if="coll.jz.length > 0" :dataArray="coll.jz"></goods-list>
					</view>
					<view v-if="navIndex2 == 1">
						<pet-list v-if="coll.cw.length > 0" :dataArray="coll.cw"></pet-list>
					</view>
					<view v-if="navIndex2 == 2">
						<waterfall-flow v-if="coll.zp.length > 0" :dataArray="coll.zp"></waterfall-flow>
					</view>
					<view v-if="navIndex2 == 3">
						<food-list v-if="coll.md.length > 0" :dataArray="coll.md" :show_location="false"></food-list>
					</view>
					<view v-if="navIndex2 ==4">
						<view v-for="(item,index) in coll.tg" :key="index" class="tuangouwrap"
							@click="nologinJump('/groupPurchase/detail/index?id=' + item.id)">
							<image :src=" api_host+item.icon" style="width: 150rpx;height: 150rpx;border-radius: 15rpx;">
							</image>
							<view class="ml20">
								<p class="fw500">{{item.goodName}}</p>
								<p class="f24 c999 mt10">{{item.brand}}</p>
								<p class="cff7 mt10">￥{{item.salePrice}}</p>
							</view>
						</view>
					</view>
					<view v-if="navIndex2 == 5">
						<view class="common-list">
							<view class="common-item" v-for="item in coll.gw" :key="item.id"
								@click="nologinJump(`/subpage/talentemployment/employment/postinfo?id=${item.id}`)">
								<view class="common-name">
									<text class="name-text">{{ item.stationName }}</text>
									<text class="text-color" v-if="item.salaryRange !== '面议'">{{ item.salaryRange }}元</text>
									<text class="text-color" v-else>面议</text>
									
								</view>
								<view class="common-label">
									<text>{{ item.stationEdu }}</text>
									<text>{{ item.stationLesson }}</text>
									<text>招{{ item.recruitsNumber }}人</text>
								</view>
								<view class="common-footer">
									<text class="foot-text">{{ item.companyInfo.compName }}</text>
									<text class="foot-address">{{ item.companyInfo.compAddr }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="navIndex == 2">
					<waterfall-flow v-if="coll.zp.length > 0" :dataArray="coll.zp"></waterfall-flow>
					<!-- <view v-if="navIndex3 == 0">
						<goods-list v-if="coll.jz.length > 0" :dataArray="coll.jz"></goods-list>
					</view>
					<view v-if="navIndex3 == 1">
						<pet-list v-if="coll.cw.length > 0" :dataArray="coll.cw"></pet-list>
					</view>
					<view v-if="navIndex3 == 2">
						<waterfall-flow v-if="coll.zp.length > 0" :dataArray="coll.zp"></waterfall-flow>
					</view>
					<view v-if="navIndex3 == 3">
						<food-list v-if="coll.md.length > 0" :dataArray="coll.md" :show_location="false"></food-list>
					</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapActions
	} from 'vuex'
	import waterfallFlow from '@/components/waterfall-flow/index.vue'
	import goodsList from '@/components/goodsList/index.vue'
	import petList from '@/components/petList/index.vue'
	import foodList from '@/components/foodList/index.vue'
	import {
		getVloglist
	} from '@/common/api_wan.js'
	import {
		getUserlikes
	} from '@/common/api_user.js'
	export default {
		name: '',
		components: {
			waterfallFlow,
			goodsList,
			petList,
			foodList
		},
		data() {
			return {
				menuList: [{
						icon: 'icon1',
						name: '订单',
						path: '/subpage/order/index'
					},
					{
						icon: 'icon2',
						name: '评价',
						path: '/subpage/evaluate/index'
					},
					{
						icon: 'icon3',
						name: '售后',
						path: '/subpage/service/index'
					},
					{
						icon: 'icon4',
						name: '券包',
						path: '/subpage/me/coupon'
					},
					{
						icon: 'icon5',
						name: '地址',
						path: '/subpage/me/addressList'
					},
					{
						icon: 'icon6',
						name: '档案',
						path: '/subpage/pet/archives'
					}
				],
				navList: [{
						name: '作品',
						value: '1'
					},
					{
						name: '收藏',
						value: '2'
					},
					{
						name: '赞过',
						value: '3'
					}
				],
				nav2List: [{
						name: '家政',
						busine: '1',
						operation: '1',
						key: 'jz'
					},
					{
						name: '宠物',
						busine: '2',
						operation: '1',
						key: 'cw'
					},
					{
						name: '作品',
						busine: '3',
						operation: '1',
						key: 'zp'
					},
					{
						name: '门店',
						busine: '4',
						operation: '1',
						key: 'md'
					},
					{
						name: '团购',
						busine: '6',
						operation: '1',
						key: 'tg'
					},
					{
						name: '岗位',
						busine: '7',
						operation: '1',
						key: 'gw'
					}
				],
				nav3List: [{
						name: '作品',
						busine: '3',
						operation: '2',
						key: 'zp'
					},
					{
						name: '家政',
						busine: '1',
						operation: '2',
						key: 'jz'
					},
					{
						name: '宠物',
						busine: '2',
						operation: '2',
						key: 'cw'
					},
					{
						name: '作品',
						busine: '3',
						operation: '2',
						key: 'zp'
					},
					{
						name: '门店',
						busine: '4',
						operation: '2',
						key: 'md'
					}
				],
				showMenu: true,
				navIndex: 0,
				navIndex2: 0,
				navIndex3: 0,
				worksData: [],
				starData: [],
				coll: {
					jz: [],
					cw: [],
					zp: [],
					md: [],
					tg: [],
					gw: []
				}
			}
		},
		created() {
			this.getUserinfo()
			this.getVloglist()
		},
		methods: {
			...mapActions(['getUserinfo']),
			reset() {
				if (this.navIndex == 0) {
					this.getVloglist()
				}
				if (this.navIndex == 1) {
					this.getUserlikes(this.nav2List[this.navIndex2].operation, this.nav2List[this.navIndex2].busine, this
						.nav2List[this.navIndex2].key)
				}
				if (this.navIndex == 2) {
					this.getUserlikes(this.nav3List[this.navIndex3].operation, this.nav3List[this.navIndex3].busine, this
						.nav3List[this.navIndex3].key)
				}
			},
			async getVloglist() {
				this.worksData = []
				const res = await getVloglist()
				if (res.code == 200) {
					this.worksData = res.data
					this.worksData.unshift({
						type: 'draft'
					})
				}
			},
			async getUserlikes(operation, busine, key) {
				this.coll[key] = []
				const res = await getUserlikes({
					operation,
					busine
				})
				if (res.code == 200) {
					if (key == 'md') {
						this.coll[key] = res.data.map(item => {
							return {
								...item,
								imgs: item.images ? item.images.split(',') : []
							}
						})
					} else {
						this.coll[key] = res.data
					}
					console.log(this.coll, 'this.coll')
				}
			},
			navClick(index) {
				console.log(index, 'navClick')
				this.navIndex = index
				if (this.navIndex == 1) {
					this.getUserlikes(this.nav2List[this.navIndex2].operation, this.nav2List[this.navIndex2].busine, this
						.nav2List[this.navIndex2].key)
				}
				if (this.navIndex == 2) {
					this.getUserlikes(this.nav3List[this.navIndex3].operation, this.nav3List[this.navIndex3].busine, this
						.nav3List[this.navIndex3].key)
				}
			},
			nav2Click(item) {
				this.navIndex2 = item.index
				console.log(this.navIndex2, 'this.navIndex2')
				this.getUserlikes(this.nav2List[this.navIndex2].operation, this.nav2List[this.navIndex2].busine, this
					.nav2List[this.navIndex2].key)
			},
			nav3Click(item) {
				this.navIndex3 = item.index
				this.getUserlikes(this.nav3List[this.navIndex3].operation, this.nav3List[this.navIndex3].busine, this
					.nav3List[this.navIndex3].key)
			}
		}
	}
</script>

<style lang="scss">
	.tuangouwrap {
		width: 688rpx;
		background: #fff;
		border-radius: 38rpx;
		display: flex;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.bg_img {
		position: absolute;
		top: 0;
		left: 0;
	}

	.me {

		.avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50% 50% 50% 0;
			border: 3px solid #fff;
			background-color: #fff;
		}

		.data-name {
			opacity: 0.7;
			margin-top: -10rpx;
			margin-left: -14rpx;
		}

		.menu-item {
			width: 25%;
		}

		.active {
			color: #34314F;
			font-weight: bold;
			z-index: 10;
		}

		.active::after {
			position: absolute;
			content: '';
			left: -20rpx;
			top: 0;
			height: 100%;
			width: 70rpx;
			border-radius: 30rpx;
			background-color: #FEF4E8;
			background-image: linear-gradient(to right, #FFDE6D, #FFF1A6);
			z-index: -1;
		}
	}

	.common-list {
		// padding: 0 32rpx;
		box-sizing: border-box;
		.common-item {
			width: 100%;
			padding: 28rpx 32rpx 32rpx;
			margin-bottom: 24rpx;
			box-sizing: border-box;
			background: #FFFFFF;
			border-radius: 40rpx;
			.common-name {
				display: flex;
				margin-bottom: 20rpx;
				justify-content: space-between;
				.name-text {
					font-weight: 600;
					font-size: 32rpx;
					color: #34314F;
					line-height: 22px;
				}
				.text-color {
					font-weight: 500;
					font-size: 32rpx;
					color: #FF7F1C;
					line-height: 22px;
				}
			}
			.common-label {
				display: flex;
				flex-wrap: nowrap;
				margin-bottom: 24rpx;
				text {
					display: block;
					margin-right: 16rpx;
					padding: 4rpx 12rpx;
					font-size: 24rpx;
					color: #34314F;
					line-height: 32rpx;
					border-radius: 8rpx;
					background-color: #F4F4F4;
					box-sizing: border-box;
				}
			}
			.common-footer {
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-between;
				.foot-text {
					font-weight: 400;
					font-size: 26rpx;
					color: rgba(52, 49, 79, 0.7);
					line-height: 32rpx;
				}
				.foot-address {
					font-weight: 400;
					font-size: 26rpx;
					color: rgba(52, 49, 79, 0.5);
					line-height: 32rpx;
				}
			}
		}
	}
</style>